<template>
  <!--
    定制一个子组件有三个按钮，分别控制父组件中三个不同的div。
    点击按钮让对应的div背景颜色产生随机颜色值变化 
  -->
  <div>
    <div class="box">
      <div class="one" v-for="item in list" :style="item.sty">{{ item.id }}</div>
    </div>
    <Son :plist="list" @chuan="jie"></Son>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { nanoid } from "nanoid";
import Son from "./Son.vue";

const list = ref([
  { id: nanoid(8), sty: { backgroundColor: "#fff" } },
  { id: nanoid(8), sty: { backgroundColor: "#fff" } },
  { id: nanoid(8), sty: { backgroundColor: "#fff" } },
  { id: nanoid(8), sty: { backgroundColor: "#fff" } },
  { id: nanoid(8), sty: { backgroundColor: "#fff" } },
]);

// 子组件给父组件传值
const jie = (_value) => {
  console.log(_value);
  //   list.value.findIndex((item) => item.id == _value.boxid);
  let target = list.value.find((item) => item.id == _value.boxid);
  target.sty.backgroundColor = _value.bgcolor;
};
</script>

<style scoped>
.one {
  float: left;
  text-align: center;
  line-height: 200px;
  width: 300px;
  height: 200px;
}
.box {
  overflow: hidden;
}
</style>
